<script setup>
import {reactive} from "vue";
import request from "@/utils/request";

const state = reactive({
  notice: []
})

const load = () => {
  request.get("/notice").then(res => {
    state.notice = res.data
  })
}
load()
</script>

<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div>
              <span>fast-boot-vue3脚手架</span>
            </div>
          </template>
        </el-card>
      </el-col>


    </el-row>

    <el-divider />

    <div>
      <el-card style="width: 50%;  margin: 10px 0">
        <template #header>
          <div>
            <span>公告列表</span>
          </div>
        </template>
        <el-collapse accordion>
          <el-collapse-item v-for="(item,index) in state.notice" :key="item.id" :name="'' + index">
            <template #title>
              <span style="font-size: 20px;">{{ item.name }}</span>
              <span style="margin-left: 10px">{{ item.createTime }}</span>
            </template>
            <div v-html="item.content"></div>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </div>
  </div>
</template>
